@import './variables.less';
@import '../../style/mixins.less';

.fnx-badge {
	display: inline-block;
	box-sizing: border-box;
	min-width: var(--fnx-badge-size);
	padding: var(--fnx-badge-padding);
	color: var(--fnx-badge-color);
	font-weight: var(--fnx-badge-font-weight);
	font-size: var(--fnx-badge-font-size);
	font-family: var(--fnx-badge-font-family);
	line-height: 1.2;
	text-align: center;
	background-color: var(--fnx-badge-background-color);
	border-radius: var(--fnx-border-radius-max);

	&--count {
		background-color: rgba(255, 255, 255, 0);
		border-radius: 0;
	}

	&--fixed {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
		transform-origin: 100%;
	}

	&--dot {
		width: @badge-dot-size;
		min-width: 0;
		height: var(--fnx-badge-dot-size);
		background-color: var(--fnx-badge-dot-color);
		border-radius: 100%;
	}

	&__wrapper {
		position: relative;
		display: inline-block;
		margin: 10px;
	}
}
